<template>
	<view>
		<view class="con">
			<image src="/static/img/index/logo.png" class="con__logo" mode=""></image>
			<view class="con__form" v-if="logintype==1">
				<view class="con__form__item">
					<image src="/static/img/index/ic_login_phone.png" class="con__form__item__icon" mode=""></image>
					<input placeholder="请输入手机号" type="number" maxlength="11" v-model="iCustomer.tel"
						class="con__form__item__inp" />
				</view>
				<view class="con__form__item">
					<image src="/static/img/index/ic_login_psw.png" class="con__form__item__icon" mode=""></image>
					<input placeholder="请输入密码" v-model="iCustomer.password" type="password"
						class="con__form__item__inp" />
				</view>
				<view class="con__form__ts" @click="navto('/pages/index/forgetPassword?type=1')">
					忘记密码
				</view>
				<view class="con__form__btn">
					<u-button text="登录" :loading='loading' color="#6492FF" @click="userLogin" shape='circle'></u-button>

				</view>
				<view class="u-flex u-flex-xy-center" style="color: #707070;">
					<view class="con__form__check" @click="ischeck=!ischeck">
						<image v-if="ischeck" src="/static/img/my/check.png" class="con__form__check__icon" mode="">
						</image>
						<image v-else src="/static/img/my/nocheck.png" class="con__form__check__icon" mode=""></image>
					</view>
					我已经阅读并同意 <text class="c649"
						@click="navto('/pages/my/webviewpage?title=用户服务协议&name=agreement')">用户协议</text> 和 <text
						class="c649" @click="navto('/pages/my/webviewpage?title=隐私政策&name=private')">隐私政策</text>
				</view>
				<view class="u-flex u-flex-xy-center" style="margin-top: 50rpx;font-size: 30rpx;">
					<view class="c649" @click="logintype=2,cleardata()">
						验证码登录
					</view>
					<view class="" style="margin: 0 10rpx;font-size: 24rpx;">
						|
					</view>
					<view class="c649" @click="logintype=3,cleardata()">
						立即注册
					</view>
				</view>
			</view>
			<!-- 验证码登录 -->
			<view class="con__form" v-if="logintype==2">
				<view class="con__form__item">
					<image src="/static/img/index/ic_login_phone.png" class="con__form__item__icon" mode=""></image>
					<input placeholder="请输入手机号" type="number" v-model="iCustomer.tel" maxlength="11"
						class="con__form__item__inp" />
				</view>
				<view class="con__form__item">
					<image src="/static/img/index/ic_login_sms.png" class="con__form__item__icon" mode=""></image>
					<input style="flex: 1;" v-model="iCustomer.smsCode" placeholder="请输入验证码" type="number"
						class="con__form__item__inp" />
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<view class="">
						<u-button @tap="getCode">{{tips}}</u-button>
					</view>
				</view>
				<view class="con__form__btn">
					<u-button text="登录" :loading='loading' @click="yzlogin" color="#6492FF" shape='circle'></u-button>

				</view>
				<view class="u-flex u-flex-xy-center" style="color: #707070;">
					<view class="con__form__check" @click="ischeck=!ischeck">
						<image v-if="ischeck" src="/static/img/my/check.png" class="con__form__check__icon" mode="">
						</image>
						<image v-else src="/static/img/my/nocheck.png" class="con__form__check__icon" mode=""></image>
					</view>
					我已经阅读并同意 <text class="c649">用户协议</text> 和 <text class="c649">隐私政策</text>
				</view>
				<view class="u-flex u-flex-xy-center" style="margin-top: 50rpx;font-size: 30rpx;">
					<view class="c649" @click="logintype=1,cleardata()">
						账号登录
					</view>
					<view class="" style="margin: 0 10rpx;font-size: 24rpx;">
						|
					</view>
					<view class="c649" @click="logintype=3,cleardata()">
						立即注册
					</view>
				</view>
			</view>
			<!-- 注册 -->
			<view class="con__form" v-if="logintype==3">
				<view class="con__form__item">
					<image src="/static/img/index/ic_login_name.png" class="con__form__item__icon" mode=""></image>
					<input placeholder="请输入昵称" v-model="iCustomer.name" type="text" class="con__form__item__inp" />
				</view>
				<view class="con__form__item">
					<image src="/static/img/index/ic_login_phone.png" class="con__form__item__icon" mode=""></image>
					<input placeholder="请输入手机号" v-model="iCustomer.tel" type="number" maxlength="11"
						class="con__form__item__inp" />
				</view>
				<view class="con__form__item">
					<image src="/static/img/index/ic_login_sms.png" class="con__form__item__icon" mode=""></image>
					<input style="flex: 1;" placeholder="请输入验证码" type="number" class="con__form__item__inp"
						v-model="iCustomer.smsCode" />
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<view class="">
						<u-button @tap="getCode">{{tips}}</u-button>
					</view>
				</view>
				<view class="con__form__item">
					<image src="/static/img/index/ic_login_invite_code.png" class="con__form__item__icon" mode="">
					</image>
					<input placeholder="请输入邀请码" v-model="iCustomer.superInviteCode" type="text"
						class="con__form__item__inp" />
				</view>
				<view class="con__form__item">
					<image src="/static/img/index/ic_login_psw.png" class="con__form__item__icon" mode=""></image>
					<input placeholder="请输入密码" type="password" v-model="iCustomer.password"
						class="con__form__item__inp" />
				</view>
				<view class="con__form__btn">
					<u-button text="立即注册" :loading='loading' @click="regest" color="#6492FF" shape='circle'></u-button>
				</view>
				<view class="u-flex u-flex-xy-center" style="margin-top: 50rpx;font-size: 30rpx;">
					<view class="c649" @click="logintype=1,cleardata()">
						账号登录
					</view>
					<view class="" style="margin: 0 10rpx;font-size: 24rpx;">
						|
					</view>
					<view class="c649" @click="logintype=2,cleardata()">
						验证码登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		reg,
		sendSms,
		login,
		yzLogin
	} from '@/api/user.js'
	export default {
		data() {
			return {
				logintype: 1, //1：密码登录，2：验证码登录，3：立即注册
				tips: '',
				// refCode: null,
				seconds: 60,
				iCustomer: {
					"accountBalance": 0,
					"accountType": 0,
					"buildTime": "",
					"childRatio": 0,
					"credit": 0,
					"creditBack": "",
					"creditFront": "",
					"creditId": "",
					"dayIncome": 0,
					"extend1": "",
					"extend2": "",
					"extend3": "",
					"grandSonCount": 0,
					"gtClientId": "",
					"headUrl": "",
					"hotLink": "",
					"iRatio": 0,
					"id": 0,
					"inviteCode": "",
					"isPartener": 0,
					"linkTel": "",
					"monthIncome": 0,
					"name": "",
					"openId": "",
					"password": "",
					"personGroup": "",
					"platLinkerId": 0,
					"qqNo": "",
					"smsCode": "",
					"sonCount": 0,
					"status": 0,
					"super2Id": 0,
					"super2Ratio": 0,
					"superId": 0,
					"superInviteCode": "",
					"superRatio": 0,
					"tel": "",
					"topType": 0,
					"totalIncome": 0,
					"type": "",
					"wechatNo": ""
				},
				ischeck: false,
				loading: false
			};
		},
		onLoad(option) {
			if(option.logintype){
				this.logintype=option.logintype
				this.iCustomer.superInviteCode=option.inviteCode
			}
			
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				let type = 1
				if (this.logintype == 3) {
					type = 4
				} else {
					let type = 1
				}
				if (!this.iCustomer.tel) {
					this.$u.toast('请输入正确的手机号')
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					sendSms({
						tel: this.iCustomer.tel,
						type
					}).then(res => {
						if (res.data.code == 200) {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						} else {
							uni.$u.toast('验证码获取失败，请重试');
						}
						uni.hideLoading();

					})
				}
			},
			// 注册
			regest() {
				// 判断信息是否完整
				let {
					name,
					tel,
					smsCode,
					superInviteCode,
					password
				} = this.iCustomer

				if (!name) {
					this.$u.toast('请输入昵称')
					return
				}
				if (!tel) {
					this.$u.toast('请输入手机号')
					return
				}
				if (!smsCode) {
					this.$u.toast('请输入验证码')
					return
				}
				if (!superInviteCode) {
					this.$u.toast('请输入邀请码')
					return
				}
				if (!password) {
					this.$u.toast('请输入密码')
					return
				}
				this.loading = true
				reg({
					name,
					tel,
					smsCode,
					superInviteCode,
					password
				}).then(res => {
					this.loading = false
					if (res.data.code == 200) {
						this.$u.toast('注册成功')
						// 将信息全部清理
						this.cleardata()
						this.logintype = 1
					} else {
						this.$u.toast(res.data.msg)
					}
				})
			},
			// 账户登录
			userLogin() {
				// 判断信息是否完整
				let {
					tel,
					password
				} = this.iCustomer
				if (!tel) {
					this.$u.toast('请输入手机号')
					return
				}
				if (!password) {
					this.$u.toast('请输入密码')
					return
				}
				// 判断是否同意
				if (!this.ischeck) {
					this.$u.toast('请阅读勾选用户协议和隐私政策')
					return
				}
				login({
					tel,
					password
				}).then(res => {
					if (res.data.code == 200) {
						this.$u.toast('登录成功')
						uni.setStorageSync('ytbtoken', res.data.data.token)
						uni.setStorageSync('ytbuser', res.data.data.customer)
						uni.switchTab({
							url: '/pages/tabbar/home'
						})
					} else {
						this.$u.toast(res.data.msg)
					}
				})
			},
			yzlogin() {
				let {
					tel,
					smsCode
				} = this.iCustomer
				if (!tel) {
					this.$u.toast('请输入手机号')
					return
				}
				if (!smsCode) {
					this.$u.toast('请输入验证码')
					return
				}
				if (!this.ischeck) {
					this.$u.toast('请阅读勾选用户协议和隐私政策')
					return
				}
				yzLogin({
					tel,
					smsCode
				}).then(res => {
					if (res.data.code == 200) {
						this.$u.toast('登录成功')
						uni.setStorageSync('ytbtoken', res.data.data.token)
						uni.setStorageSync('ytbuser', res.data.data.customer)
						uni.switchTab({
							url: '/pages/tabbar/home'
						})
					} else {
						this.$u.toast(res.data.msg)
					}
				})
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			// 清理数据
			cleardata() {
				this.iCustomer = {
					"accountBalance": 0,
					"accountType": 0,
					"buildTime": "",
					"childRatio": 0,
					"credit": 0,
					"creditBack": "",
					"creditFront": "",
					"creditId": "",
					"dayIncome": 0,
					"extend1": "",
					"extend2": "",
					"extend3": "",
					"grandSonCount": 0,
					"gtClientId": "",
					"headUrl": "",
					"hotLink": "",
					"iRatio": 0,
					"id": 0,
					"inviteCode": "",
					"isPartener": 0,
					"linkTel": "",
					"monthIncome": 0,
					"name": "",
					"openId": "",
					"password": "",
					"personGroup": "",
					"platLinkerId": 0,
					"qqNo": "",
					"smsCode": "",
					"sonCount": 0,
					"status": 0,
					"super2Id": 0,
					"super2Ratio": 0,
					"superId": 0,
					"superInviteCode": "",
					"superRatio": 0,
					"tel": "",
					"topType": 0,
					"totalIncome": 0,
					"type": "",
					"wechatNo": ""
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.con {
		padding: 30% 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		&__logo {
			width: 160rpx;
			height: 160rpx;
		}

		&__form {
			padding: 0 75rpx;
			width: 600rpx;
			font-size: 26rpx;
			line-height: 26rpx;

			&__item {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid rgba(205, 205, 205, .8);
				padding: 20rpx 0;

				&__icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				&__inp {
					font-size: 26rpx;
					flex: 1;
				}
			}

			&__ts {
				color: #6492ff;
				margin-top: 40rpx;
			}

			&__btn {
				padding: 50rpx 50rpx 30rpx;
			}

			&__check {
				margin-right: 6rpx;

				&__icon {
					width: 30rpx;
					height: 30rpx;
				}
			}

		}
	}

	.c649 {
		color: #6492ff;
		margin: 0 6rpx;
	}
</style>